import styles from './style.less'
import { pageTask } from '@/services/project/task'
import Gantt from '@/components/Gantt'
import PageLoading from '@/components/PageLoading'
import { useState, useEffect } from 'react'
import { TaskStatus } from '../../ProjectTask/TaskPage'
import UserBrief from '@/components/UserBrief';

const TaskGantt = (props) => {

    const {
        projectId,
        projectProdId,
        queryInitParams,
        title,
        description
    } = props;
    useEffect(() => {
        const initParam = {
            pageSize: 200,
            ...queryInitParams
        }
        if (projectId) {
            queryTaskPage(initParam)
        }
    }, [projectId])

    const [taskList, setTaskList] = useState();

    const queryTaskPage = (queryParams) => {
        pageTask(projectId, (queryParams)).then(({ data }) => {
            setTaskList(data?.list.map((taskItem) => {
                return {
                    ...taskItem,
                    startDate: taskItem.actualStartDate || taskItem.planStartDate,
                    endDate: taskItem.actualEndDate || taskItem.planEndDate,
                }
            }))
        })
    }

    if (!taskList) {
        return <PageLoading></PageLoading>
    }


    return <div>
        <Gantt
            columns={[
                {
                    title: "名称",
                    name: "name",
                    width: "100px"
                },
                {
                    title: "状态",
                    name: "status",
                    render: (item) => {
                        return <TaskStatus status={item.status}></TaskStatus>
                    }
                },
                {
                    title: "负责人",
                    name: "user",
                    width: "100px",
                    render: (item) => {
                        return <UserBrief user={item.user}></UserBrief>
                    }
                }
            ]}
            taskData={taskList}
            ganttId={`${projectProdId}`}
            // title={title}
            description={description}></Gantt>
    </div>

}


export default TaskGantt;